<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>设备型号</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" href="${path}/resource/css/gzfx.css">
	
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>

	<script type="text/javascript"></script>
</head>
<body>
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="../allEquip/top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    
    <!-- 右侧内容区域 -->
    <div class="right-content container-fluid ">
    	<div class="row">
    		<!-- 主要图表区域 -->
    		<div class="row right-nav">
	    			<div class="title-name">
	    				<span>变频设备型号地域分布统计</span>
	    				
	    			</div>
	    			<div class=" right nav-over padding-r-1">
	    				
	    				<select id="actval" class="back-m1 color-w" onchange="jiekou();">
<!-- 	    					<option value="">请选择设备型号</option> -->
							<option value="TGS14">TGS14</option>
	    					<option value="设备型号1">设备型号1</option>
	    					<option value="设备型号2">设备型号2</option>
	    				</select>
	    			</div>
	    			
	    	</div>
	    	<div class="content-img ">
	    		<div id="mainEcharts" style="float:left;width: 71%; height: 100%;"></div>
	    		<div style="float:left;width: 28%; height: 100%;">
	    			<div id="rightEcharts1" style="width: 100%; height: 30%; margin-top: 3%;"></div>
	    			<div id="rightEcharts2" style="width: 100%; height: 30%; margin-top: 5%;"></div>
<!-- 					<div id="rightEcharts2title" style="width: 100%; height: 5%; background-color: white; text-align: center;">IN</div> -->
	    			<div id="rightEcharts3" style="width: 100%; height: 30%; margin-top: 5%;"></div>
<!-- 	    			<div id="rightEcharts2title" style="width: 100%; height: 5%; background-color: white; text-align: center;">OUT</div> -->
	    		</div>
	    	</div>
	    </div>
    </div>




	
</body>
<script type="text/javascript">

	//测试数据
	var testdata = [
        {value:335, name:'珠海'},
        {value:310, name:'广州'},
        {value:234, name:'上海'},
        {value:135, name:'北京'},
        {value:1548, name:'其他'}
    ];
	var testlegend = ['珠海','广州','上海','北京','其他'];

	$(function(){
		$(".img-fbtj").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
		$(".img-fbtj").attr("src",'${path}/resource/images/fbtj2.png')
		$(".img-fbtj").parent().parent().addClass("dl-active");
		$(".img-fbtj").parent().parent().css("padding","5px 0px");
		$(".img-sbxh").attr("src","${path}/resource/images/sbxh2.png")
		$(".img-sbxh").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
		$(".img-sbxh").removeClass('padding-1');
		loadSelect();
		jiekou();
		devCountByMonth();
// 		devCountByMonthWithProvince();
// 		devCountByAreaWithProvince();
	});

//加载下拉框
function loadSelect() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/initopt',
		data : {
			opttype : 'powerLevel'
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == 'OK') {console.log(result);
				var html = '';
				var ops = eval("(" + result.data.powerLevel + ")");
				$.each(ops, function(i) {
					html += ops[i].value;
				});
				$('#actval').html('');
				$('#actval').append(html);
			} else {
				console.error("获取下拉框数据失败！");
			}
		},
		error : function() {
			console.error("系统错误！");
		}
	});
}
	
function jiekou() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/chtcapupdate',
		data : {
			actval : $('#actval').val()
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			console.log(result);
			if(result.status == 'OK') {
				var data = [];
				var legend = [];
				var chtcapupdate = eval("(" + result.data.chtcapupdate + ")");
				if(result.data.chtcapupdate == "[null]") {
					initMainEcharts([], []);
				} else {
					$.each(chtcapupdate, function(i) {
						data.push({
							name : chtcapupdate[i].cityArea,
							value : chtcapupdate[i].count
						});
						legend.push(chtcapupdate[i].cityArea);
					});
					initMainEcharts(legend, data);
				}
			} else {
				initMainEcharts(testlegend, testdata);
			}
		},
		error : function() {
			initMainEcharts(testlegend, testdata);
		}
	});
}
	
function initMainEcharts(legend, data) {
	var mainEcharts = echarts.init(document.getElementById('mainEcharts'));
	mainEcharts.setOption({
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        y: 'bottom',
		        data : legend
		    },
		    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
		    series : [
		        {
		            name: '设备型号分布',
		            type: 'pie',
		            radius : ['55%', '70%'],
		            data : data,
		            label: {
		                normal: {
		                    formatter: '{d}%\n{c}台',
		                    textStyle : {
		                        fontSize : 25
		                    }
		                }
		            },
		            labelLine: {
		                normal: {
		                    length : 20,
		                    length2 : 50
		                }
		            },
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
	});
	mainEcharts.on('click', function (params) {
	    if (params.componentType === 'series') {
	        if (params.seriesType === 'pie') {
	        	devCountByMonthWithProvince(params.name);
	        	devCountByAreaWithProvince(params.name);
	        }
	    }
	});
}
	var rightEcharts1 = echarts.init(document.getElementById('rightEcharts1'));
	rightEcharts1.setOption({
		backgroundColor: '#f4f2e3',
	    title: {
	    	x: 'left',
	        y: 0,
	        text: 'December',
	        textStyle : {
	            fontSize : 10
	        }
	    },
	    grid : {
	    	left : '1%',
	    	top : '2%',
	    	right : '1%',
	    	bottom : '1%'
	    },
	    xAxis: {
	        data: [],
	        axisTick: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        z: 10
	    },
	    yAxis: {
	        axisLine : {
	            show : false
	        },
	        axisTick : {
	            show : false
	        },
	        axisLabel : {
	            show : false
	        }
	    },
	    series: [
	        { // For shadow
	            type: 'bar',
	            itemStyle: {
	                normal: {color: 'rgba(0,0,0,0.1)'}
	            },
	            barGap:'-100%',
	            barCategoryGap:'40%',
	            data: []
	        },
	        {
	            type: 'bar',
	            itemStyle: {
	                normal: {
	                    color: '#FF8C00'
	                }
	            },
	            data: []
	        }
	    ]
	});
	
	var rightPieOption = {
		backgroundColor: '#fff',
// 	    title: {
// 	        text: 'IN',
// 	        left: 'center',
// 	        top: 'bottom'
// 	    },
	    tooltip: {
	        show: false,
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    series: [{
	            name: 'Line 1',
	            type: 'pie',
	            clockWise: true,
	            radius: ['65%', '80%'],
	            label: {
	                normal: {
	                	position: 'center',
	                    formatter: '$240k',
	                    textStyle: {
	                        fontSize: 10,
	                        fontWeight : 'bold',
	                        color: 'black'
	                    }
	                }
	            },
	            hoverAnimation: false,
	            startAngle: 90,
	            data: [{
	                value: 20,
	                name: '01',
	                itemStyle: {
	                    normal: {
	                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                            offset: 0,
	                            color: 'green' // 0% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: 'yellow' // 100% 处的颜色
	                        }], false)
	                    }
	                }
	            }, {
	                value: 10,
	                name: '01',
	                itemStyle: {
	                    normal: {
	                        color: 'rgba(0,0,0,0.1)',
	                        label: {
	                            show: false
	                        },
	                        labelLine: {
	                            show: false
	                        }
	                    },
	                    emphasis: {
	                        color: 'rgba(0,0,0,0.1)'
	                    }
	                }
	            }, ]
	        }

	    ]
	};
	
	var option2 = {
			backgroundColor:['#f4f2e3'],
			xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
		    },
		    yAxis: {
		        type: 'value',
		    },
		    grid: {
	 	        left: '0',
	 	        right: '5%',
	 	        bottom: '0',
	 	        top: '10%',
	 	        containLabel: true
	 	    },
	 	   	tooltip: {
		    	x:'right',
		        trigger: 'axis'
		    },
		    series: [
		             {
		                 name:'数量',
		                 type:'line',
		                 smooth: true,
		                 data:[200,180,220, 210, 224, 215, 150,215,280,200,220,110,120,110,200],
		             
		             }
		     ]
	};
	
	var rightEcharts2 = echarts.init(document.getElementById('rightEcharts2'));
	rightEcharts2.setOption(option2);
	
	var rightEcharts3 = echarts.init(document.getElementById('rightEcharts3'));
	rightEcharts3.setOption({
		backgroundColor:'#f4f2e3',
	    tooltip: {
	        trigger: 'item',
	        formatter: "{a} <br/>{b}: {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        x: 'left',
	        y: 'bottom',
	        data : ['珠海','广州','上海','北京','其他']
	    },
	    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
	    series : [
	        {
	            name: '设备型号分布',
	            type: 'pie',
	            radius : ['55%', '70%'],
	            data : [
	                    {value:335, name:'珠海'},
	                    {value:310, name:'广州'},
	                    {value:234, name:'上海'},
	                    {value:135, name:'北京'},
	                    {value:1548, name:'其他'}
	                ],
	            label: {
	                normal: {
	                	show : false,
	                	position: 'center',
	                    formatter: '{d}%\n{c}台',
	                    textStyle : {
	                        fontSize : 25
	                    }
	                }
	            },
	            labelLine: {
	                normal: {
	                    show : false
	                }
	            },
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
});
	
	//12各月各月新增设备
	function devCountByMonth(){
		$.ajax({
			url : '<%=path%>/manage/devCountByMonth',
			data : { },
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	if(result.status == 'OK') {
		        	var rig1xAxis = [], rig1seriesdata = [];
		        	$.each(result.data,function(i) {
		        		rig1xAxis.push(result.data[i].month);
		        		rig1seriesdata.push(result.data[i].count);
		        	});
		        	option2.xAxis.data = rig1xAxis;
		        	option2.series.data = rig1seriesdata;
		        	rightEcharts1.setOption({
		        		backgroundColor: '#f4f2e3',
		        	    title: {
		        	    	show : false
		        	    },
		        	    grid : {
		        	    	left : '8%',
		        	    	top : '5%',
		        	    	right : '1%',
		        	    	bottom : '10%'
		        	    },
		        	    tooltip: {
		        	        show: true
		        	    },
		        	    xAxis: {
		        	        data: rig1xAxis,
		        	        axisTick: {
		        	            show: true
		        	        },
		        	        axisLine: {
		        	            show: true
		        	        },
		        	        z: 10
		        	    },
		        	    yAxis: {
		        	        axisLine : {
		        	            show : true
		        	        },
		        	        axisTick : {
		        	            show : true
		        	        },
		        	        axisLabel : {
		        	            show : true
		        	        }
		        	    },
		        	    series: [
// 		        	        { // For shadow
// 		        	            type: 'bar',
// 		        	            itemStyle: {
// 		        	                normal: {color: 'rgba(0,0,0,0.1)'}
// 		        	            },
// 		        	            barGap:'-100%',
// 		        	            barCategoryGap:'40%',
// 		        	            data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500]
// 		        	        },
		        	        {
		        	            type: 'bar',
		        	            itemStyle: {
		        	                normal: {
		        	                    color: '#FF8C00'
		        	                }
		        	            },
		        	            data: rig1seriesdata
		        	        }
		        	    ]
		        	});
	        	}
			},			
			error : function(result) {
				console.log('error');
	        	console.log(result);
			}
		});	
	}
	//指定省份12月各月新增设备
	function devCountByMonthWithProvince(province){
		$.ajax({
			url : '<%=path%>/manage/devCountByMonthWithProvince',
			data : { province : province },
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	if(result.status == 'OK') {
		        	var rig2xAxis = [], rig2seriesdata = [];
		        	$.each(result.data,function(i) {
		        		rig2xAxis.push(result.data[i].month);
		        		rig2seriesdata.push(result.data[i].count);
		        	});
		        	option2.xAxis.data = rig2xAxis;
		        	option2.series.data = rig2seriesdata;
		        	rightEcharts2.setOption({
			    			backgroundColor:'#f4f2e3',
			    			xAxis: {
			    		        type: 'category',
			    		        boundaryGap: false,
			    		        data: rig2xAxis
			    		    },
			    		    yAxis: {
			    		        type: 'value',
			    		    },
			    		    grid: {
			    	 	        left: '3%',
			    	 	        right: '1%',
			    	 	        bottom: '5%',
			    	 	        top: '10%',
			    	 	        containLabel: true
			    	 	    },
			    	 	   	tooltip: {
			    		    	x:'right',
			    		        trigger: 'axis'
			    		    },
			    		    series: [
			    		             {
			    		                 name:'数量',
			    		                 type:'line',
			    		                 smooth: true,
			    		                 data:rig2seriesdata,
			    		             
			    		             }
			    		     ]
			    	});
	        	}
			},			
			error : function(result) {
				console.log('error');
	        	console.log(result);
			}
		});	
	}
	//指定省份各地设备
	function devCountByAreaWithProvince(province){
		$.ajax({
			url : '<%=path%>/manage/devCountByAreaWithProvince',
			data : { province : province },
	        type : 'post',
	        dataType : 'json',
	        async : false,	        
	        success : function(result) {
	        	console.log('success:');
	        	console.log(result);
	        	if(result.status == 'OK') {
		        	var rig2xAxis = [], rig2seriesdata = [];
		        	$.each(result.data,function(i) {
		        		rig2xAxis.push(result.data[i].cityArea);
		        		rig2seriesdata.push(
		        				{value:result.data[i].count, name:result.data[i].cityArea}
		        		);
		        	});
		        	option2.xAxis.data = rig2xAxis;
		        	option2.series.data = rig2seriesdata;
		        	rightEcharts3.setOption({
		        		backgroundColor:'#f4f2e3',
		    		    tooltip: {
		    		        trigger: 'item',
		    		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    		    },
		    		    legend: {
		    		        orient: 'vertical',
		    		        x: 'left',
		    		        y: 'bottom',
		    		        data : rig2xAxis
		    		    },
		    		    color : [ '#08d677', '#c23531','#2f4554','#61a0a8','#d48265','#946006','#337ab7','#555','#f3a5a5','#dff0d8'],
		    		    series : [
		    		        {
		    		            name: '设备型号分布',
		    		            type: 'pie',
		    		            radius : ['55%', '70%'],
		    		            data : rig2seriesdata,
		    		            label: {
		    		                normal: {
		    		                	show : false,
		    		                	position: 'center',
		    		                    formatter: '{d}%\n{c}台',
		    		                    textStyle : {
		    		                        fontSize : 25
		    		                    }
		    		                }
		    		            },
		    		            labelLine: {
		    		                normal: {
		    		                    show : false
		    		                }
		    		            },
		    		            itemStyle: {
		    		                emphasis: {
		    		                    shadowBlur: 10,
		    		                    shadowOffsetX: 0,
		    		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		    		                }
		    		            }
		    		        }
		    		    ]
		    	});
	        	}
			},			
			error : function(result) {
				console.log('error');
	        	console.log(result);
			}
		});	
	}
</script>
</html> 